<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="460px" append-to-body>
        <el-form :model="model" ref="form" inline label-width="80" v-loading="loading">
            <el-form-item label="运营标签" prop="tag_campaign">
                <el-select v-model="model.tag_campaign" placeholder="请选择运营标签" clearable size="small" style="width: 240px">
                    <el-option v-for="item in operationLabelList" :key="item.value" :label="item.label" :value="item.value">
                        <span style="float: left">{{ item.label }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label=" ">
                <el-button type="primary" @click="search">确认修改</el-button>
            </el-form-item>

        </el-form>
    </el-dialog>
</template>

<script>
import { wholePageModification,getOperationLabelList } from '@/api/orderSource'
export default {
    name: 'OperationDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
        // source  sku
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            operationLabelList: [],
            ids: [],
            model: {
                id: '',
                tag_campaign: '',
            },
        }
    },
    computed: {
        title() {
            return `整页替换运营`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },

    async created() {
        this.ids = this.params.map(item => item.id)
        try {
            const operationData = await getOperationLabelList()
            this.operationLabelList = operationData?.data ?? []
        } catch (error) {
            this.loading = false
        }
    },
    methods: {
        search() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }
                if (!this.model.tag_campaign.length) {
                    return this.$message.warning('请先选择运营标签')
                }
                if (!this.ids.length) {
                    return this.$message.warning('暂无数据')
                }
                this.loading = true
                const qyparams = {
                    tag_campaign: this.model.tag_campaign,
                    ids : this.ids,
                }
                wholePageModification(qyparams)
                    .then(res => {
                        this.$message.success(res.msg)
                        this.dialogVisible = false
                        this.$emit('success')
                    })
                    .finally(() => {
                        this.save = false
                    })
            })
        },
        // 搜索按钮操作
        handleQuery() {
            this.pageInfo.page = 1
        },

        // 重置按钮操作
        resetQuery() {
            this.resetForm('queryForm')

            this.handleQuery()
        },
    },
}
</script>

<style>
.order-page {
    min-height: 100%;
    background: #f1f1f1;
}
.order-header {
    margin-bottom: 24px;
    padding-left: 24px;
}
.header-title-title {
    font-size: 18px;
    line-height: 32px;
    font-weight: bold;
    margin-right: 8px;
}
.order-content {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}
.order-main {
    width: 66%;
    margin-right: 2%;
}
.order-sub {
    width: 32%;
}
.order-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 0 4px #eee;
}
.card-content {
    margin: 8px 0;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
}
.card-item {
    padding: 16px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    flex-wrap: nowrap;
}
.card-item:last-child {
    border-bottom: 0;
}
.card-item-logo {
    width: 50px;
    height: 50px;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    margin-right: 16px;
}
.card-item-logo .el-image {
    width: 50px;
    height: 50px;
}
.card-item-content {
    flex: 1;
}
.card-item-left,
.card-item-right {
    width: 15%;
}
.card-item-right {
    text-align: right;
}
.text-bold {
    font-weight: bold;
}
.text-primary {
    color: #11a983;
}
</style>
